<script setup lang="ts">
import { ref,provide } from 'vue';
const props =defineProps<{
	text?:string
}>()
const text = ref(props.text)
</script>

<template>  		
	<div class="notepad-content">
		<div class="menus">
			<div class="menu">文件(F)</div>
			<div class="menu">编辑(E)</div>
			<div class="menu">搜索(S)</div>
		</div>
		<div class="text">
			
		<textarea v-model="text"></textarea>
		</div>
	</div>
</template>

<style scoped>

		.notepad-content{
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			font-size: 1em;
		}
		.notepad-content .menus{
		    height: 2em;
			display: flex;
			background-color: white;
		}
		.notepad-content .menus .menu{
			margin:0 0.5em
		}
		.notepad-content .text{
			flex: 1;
			background-color: #fff;
			border: 0.1em solid #ccc;
			box-sizing: border-box;
		}

		.notepad-content .text textarea{
			width: 100%;
			height: 100%;
			border: none;
			outline: none;
			padding: 0.8em;
			box-sizing: border-box;
			resize: none;
		}
</style>